<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <base th:href="@{http://localhost/crowd/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="crowd/handlerRequest.js"></script>
<script type="text/javascript">
    $(function (){
        $("#sendBtn").click(function (){
            // 获取手机号
            let phoneNum = $.trim($("[name=phoneNum]").val());
            // 发送请求
            // 请求数据
            let data = {
                "phoneNum": phoneNum
            };
            // 请求地址
            let url = "/crowd/auth/member/send/short/message.json"
            requestString(url,data,"发送");


        })
        // 验证登录账号能否使用
        $("#inputSuccess0").change(function (){
            // 清空loginAcctTip的Class
            $("#loginAcctTip").removeClass();
            // 获取登录账号
            let loginAcct = $.trim($(this).val());

            $.ajax({
                "url": "/crowd/auth/query/member/loginAcct/avail.json",
                "data": {
                    "loginAcct": loginAcct},
                "dataType": "json",
                "type": "post",
                "success": function (response) {
                    let result = response.result;
                    if("SUCCESS" == result){
                        $("#loginAcctTip").addClass("glyphicon glyphicon-ok");
                        $("#loginAcctTip").text("账号可用")

                    }else {
                        $("#loginAcctTip").addClass("glyphicon glyphicon-remove");
                        $("#loginAcctTip").text("账号不可用")
                    }
                }
            })
        })
    })
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" th:href="@{/crowd/}" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
        </div>
    </div>
</nav>

<div class="container">

    <form action="/crowd/auth/do/member/register" class="form-signin" role="form" method="post">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
        <p th:text="${message}"></p>
        <div class="form-group has-success has-feedback">
            <input type="text" name="loginacct" class="form-control" id="inputSuccess0" placeholder="请输入登录账号" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
            <span id="loginAcctTip" class=""></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="userpswd" class="form-control" id="inputSuccess1" placeholder="请输入登录密码" style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="username" class="form-control" id="inputSuccess5" placeholder="请输入用户昵称" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-tag form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="email" class="form-control" id="inputSuccess2" placeholder="请输入邮箱地址" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text"  name="phoneNum" class="form-control" id="inputSuccess3" placeholder="请输入手机号" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-earphone form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="code" class="form-control" id="inputSuccess4" placeholder="请输入验证码" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-comment form-control-feedback"></span>
        </div>
<!--        type为button防止默认提交-->
        <button id="sendBtn" type="button" class="btn btn-lg btn-success btn-block"> 获取验证码</button>
        <button type="submit" class="btn btn-lg btn-success btn-block"> 注册</button>
    </form>
</div>

</body>
</html>